define(["Underscore", "Backbone"], function(_, Backbone) {

	var template = 	"<header><h3>Categories</h3></header>" +
					"<ul><% _.each(list, function(model) { %>" +
					"<li><a href><%= model.value %></a></li>" +
					"<% }) %></ul>";

	return Backbone.View.extend({
		tagName: "section",

		initialize: function() {
			console.log("CategoriesView - Initialize");

			this.template = _.template(template);
			this.model.on("change:categories", this.render, this);
		},

		render: function() {
			console.log("CategoriesView - Render");

			this.$el.empty().append(this.template({
				list: this.model.get("categories")
			}));

			return this;
		}
	});
});